<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
		<style type="text/css">
			.menu_item {
				cursor: pointer;
				border: 1px solid #AAA;
				margin: 2px;
				padding: 2px;
				width: 100px;
				height: 50px;
				text-align: center;
				display: inline-block;
				vertical-align: top;
			}
			.active_menu_item {
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			var active_menu_item = null;
			function menuClick() {
				if (active_menu_item) active_menu_item.removeClass('active_menu_item');
				active_menu_item = $(this);
				active_menu_item.addClass('active_menu_item');
			}
			
			function editUser(userData) {
				$('#nick').val(userData.nick);
				$('#name').val(userData.name);
				$('#birth_date').val(userData.birth_date);
			}
							
			$(document).ready( function() {
				$('.menu_item').click( menuClick );
				$('#menu_1').click( function() {
					$('#content').load('ajax/jquery.07.menu1.html');
				});
				$('#menu_2').click( function() {
					$('#content').load('ajax/jquery.07.menu2.html');
				});
				$('#menu_3').click( function() {
					$.getJSON('ajax/jquery.09.data.json', editUser );
				});
				$('#menu_4').click( function() {
					editUser({
						"nick": "Johny",
						"name": "John Doe",
						"birth_date": "1966"
					});
				});

				
				$('#save_user').click( function() {
					var userData = $('#user').serializeArray();
					$('#content').load('ajax/jquery.10.server.php',userData);

					
				});

			});
		</script>
    </head>
    <body>
		<div class="menu_item" id="menu_1">ajax loaded text 1</div>
		<div class="menu_item" id="menu_2">ajax loaded text 2</div>
		<div class="menu_item" id="menu_3">ajax loaded JSON data</div>
		<div class="menu_item" id="menu_4">javascript generated data</div>
		<div class="menu_item" id="menu_5">menu 5</div>
		<form id="user">
			USER: <br/>
			nick: <br><input type="text" name="nick" id="nick"><br />
			name: <br><input type="text" name="name" id="name"><br />
			birth date: <br><input type="text" name="birth_date" id="birth_date"><br />
		</form>
		<button id="save_user">save</button>
		<hr>
		<div id="content">empty content</div>
	</body>
	
</html>